<template>
  <div id="container" class="box">
    <div id="toolbar" class="special_focus_toolTip">
      <fieldset style="border:1px solid aqua;border-radius:5px;margin-top:10px;">
        <legend style="text-align:center"><span style="color:yellow;font-weight:bold;font-size:18px;">模型操作：</span></legend>
          <span style="color:aqua;font-szie:10px;margin-left:10px;">鼠标左键旋转模型，鼠标右键平移模型，鼠标滚轮放大或缩小模型</span>
      </fieldset>

      <fieldset style="border:1px solid aqua;border-radius:5px;margin-top:20px;">
        <legend style="text-align:center"><span style="color:yellow;font-weight:bold;font-size:18px;">加载数据量</span></legend>
          <div style="margin-top:10px;margin-bottom:10px;">
            <center>
              <span style="color:yellow;font-size:30px;font-weight:bold;">{{ ObjectData.length }}</span> <span style="color:aqua;">个部件</span>
            </center>
          </div>
      </fieldset>
      <div id="objectdiv" style="display:none;">
        <fieldset style="border:1px solid aqua;border-radius:5px;margin-top:20px;margin-bottom:10px;">
          <legend style="text-align:center"><span style="color:yellow;font-weight:bold;font-size:18px;">选中部件信息</span></legend>
            <el-row>
              <el-col :span="4">
                <span style="color:aqua">部件标识:</span>
              </el-col>
              <el-col :span="20">
                <span style="color:yellow">{{ objectInfo.id }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <span style="color:aqua">部件名称:</span>
              </el-col>
              <el-col :span="20">
                <span style="color:yellow">{{ objectInfo.name }}</span>
              </el-col>
            </el-row>
        </fieldset>
      </div>
    </div>
    <div id="gisMap"></div>
  </div>
</template>
<script>
import * as THREE from 'three';

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js"

export default {
  data() {
    return {
      scene: null,
      url: null,
      ObjectData: [],
      objectInfo: {},
    };
  },
  watch: {
    
  },
  computed: {
    
  },
  created(){
    this.url = this.$route.query.url;
  },
  mounted(){
    this.Init();
  },
  methods: {
    //初始化函数
    Init() {
      // 加载后克隆所有部件的材质保存
      var oldMaterial = new Array();
      let that1 = this;
      // 创建场景
      var scene = new THREE.Scene();
      that1.scene = scene;
      // 初始化GLTF加载器
      var loaders = new GLTFLoader();
      // 使用DracoLoader加载器
      const dracoLoader = new DRACOLoader()
      dracoLoader.setDecoderPath('/static/draco/')
      dracoLoader.setDecoderConfig({ type: 'js' }); //使用js方式解压
      dracoLoader.preload(); //初始化_initDecoder 解码器
      loaders.setDRACOLoader(dracoLoader)
      loaders.load(this.url, function (gltf) { 
        // 部件材质拷贝备份
        let childrenObj = gltf.scene.children;
        that1.ObjectData = childrenObj;
        if(childrenObj.length>0){
          for(var i=0;i<childrenObj.length;i++){
            let data = {
              id: childrenObj[i].id,
              name: childrenObj[i].name,
              material: childrenObj[i].material.clone()
            }
            oldMaterial.push(data);
            // 部件信息入库  联合组件： 数据集 + 对象（数据文件）+ 部件id
            // TODO
          }
        }
        scene.add(gltf.scene);
      })

      //辅助观察的坐标系
      const axesHelper = new THREE.AxesHelper(100);
      // scene.add(axesHelper);

      //光源设置
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight.position.set(400, 200, 300);
      scene.add(directionalLight);
      const ambient = new THREE.AmbientLight(0xffffff, 1);
      scene.add(ambient);

      //渲染器和相机
      let container = document.getElementById("gisMap");
      const width = window.innerWidth;
      const height = window.innerHeight-100;
      const camera = new THREE.PerspectiveCamera(2, width / height, 1, 3000); // 1是设置大小的
      camera.position.set(200, 200, 200);
      camera.lookAt(0, 0, 0);

      let that = this;
      that.renderer = new THREE.WebGLRenderer();
      that.renderer.setSize(width, height);
      container.appendChild(that.renderer.domElement);

      //解决加载gltf格式模型颜色偏差问题
      that.renderer.outputEncoding = THREE.sRGBEncoding;

      // 设置相机控件轨道控制器OrbitControls
      var controls = new OrbitControls(camera,that.renderer.domElement);//创建控件对象

      that.renderer.domElement.addEventListener( "click", onDocumentMouseDown, false );
      function onDocumentMouseDown( event ) {
        let raycaster = new THREE.Raycaster();
        let mouse = new THREE.Vector2();
        // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
        mouse.x = ( event.clientX / window.innerWidth ) * 2-1.2;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2+0.5;
        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObjects(scene.children, true);
        // 点击后恢复所有部件的材质
        let childrenObj = scene.children[2].children;
        if ( childrenObj.length > 0 ) {
          for(var i=0;i<childrenObj.length;i++){
            for(var x=0;x<oldMaterial.length;x++){
              if(childrenObj[i].id==oldMaterial[x].id){
                childrenObj[i].material = oldMaterial[x].material;
              }
            }
          }
        }
        // 高亮显示被选中的部件
        if(intersects[0]!=undefined){
          that.objectInfo = intersects[0].object;
          console.log(that.objectInfo)
          document.getElementById("objectdiv").style.display = "block";
          if ( childrenObj.length > 0 ) {
            for(var i=0;i<childrenObj.length;i++){
              if(childrenObj[i].id==intersects[0].object.id){
                let newMaterial = new THREE.MeshBasicMaterial({
                  color: 0xff0000, //可修改报警时的闪烁颜色
                  transparent: false,
                  opacity: 0.8, //可修改报警闪烁是的透明度
                  wireframe: false,
                  side: THREE.DoubleSide,
                });
                childrenObj[i].material = newMaterial;
              }
            }
          }
        }else{
          document.getElementById("objectdiv").style.display = "none";
        }
      }
      // 渲染循环
      function render() {
        that.renderer.render(scene, camera);
        requestAnimationFrame(render);
      }
      render();
    }
  }
};
</script>
<style scoped lang="scss">
html,
body,
#container{
    width: 100%;
    height: 110%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    // position: absolute;
  }
  #gisMap {
    width: inherit;
    // height: inherit;
    height: 100%;
  }
.box {
    height: 120%;
}
.special_focus_toolTip {
    margin: 5px;
    z-index: 7;
    position: absolute;
    display: block;
    width: 460px;
    height: auto;
    border-style: solid;
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
      top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    background: rgba(66, 85, 99, 0.1);
    border-width: 0px;
    border: 1px solid aqua;
    border-radius: 4px;
    color: #ffffff;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    line-height: 21px;
    padding: 10px 10px;
  }
  
/* 下划线切换高亮 */
::v-deep .el-tabs__active-bar {
  background-color: yellow;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: aqua
}

/* 鼠标选中时样式 */
::v-deep .el-tabs__item.is-active {
  color: yellow;
  opacity: 1;
}
/* 鼠标悬浮时样式 */
::v-deep .el-tabs__item:hover {
  color: yellow;
  cursor: pointer;
  opacity: 1;
}
::v-deep .el-tabs__item {
  color: aqua;
  opacity: 1;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  color:aqua;
  border: 1px solid aqua;
}

/*最外层透明*/
::v-deep .el-table{
  background-color: transparent !important;
  color: aqua;
  border: none !important;
  border-bottom: 1px solid aqua !important;
}

::v-deep .el-table th {
  background-color: transparent!important;
  border: 1px solid aqua !important;
  color: aqua;
}

::v-deep .el-table tr {
  background-color: transparent !important;
  border: 1px solid aqua !important;
}

::v-deep .el-table td {
  background-color: transparent!important;
  border: 1px solid aqua !important;
}

::v-deep .el-pagination.is-background .btn-prev {
  background: transparent !important; 
  border: 1px solid aqua;
  color: aqua;
}
::v-deep .el-pagination.is-background .btn-next{
  background: transparent !important; 
  border: 1px solid aqua;
  color: aqua;
}
</style>

